<template>
    <div>
        <el-form-item label="栅格间隔">
            <el-input type="number" v-model.number="data.options.gutter"/>
        </el-form-item>
        <el-form-item label="列配置项">
            <draggable
                tag="ul"
                :list="data.columns"
                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                handle=".drag-item"
            >
                <li v-for="(item, index) in data.columns" :key="index" >
                    <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont2 icon-icon_bars"/></i>
                    <el-input placeholder="栅格值" size="mini" style="width: 100px;" type="number" v-model.number="item.span"/>
                    <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"/>
                </li>
            </draggable>
            <div style="margin-left: 22px;">
                <el-button type="text" @click="handleAddColumn">添加列</el-button>
            </div>
        </el-form-item>
        <el-form-item label="水平排列">
            <el-select v-model="data.options.justify">
                <el-option value="start" label="左对齐"/>
                <el-option value="end" label="右对齐"/>
                <el-option value="center" label="居中"/>
                <el-option value="space-around" label="两侧间隔相等"/>
                <el-option value="space-between" label="两端对齐"/>
            </el-select>
        </el-form-item>
        <el-form-item label="垂直排列">
            <el-select v-model="data.options.align">
                <el-option value="top" label="顶部对齐"/>
                <el-option value="middle" label="居中"/>
                <el-option value="bottom" label="底部对齐"/>
            </el-select>
        </el-form-item>
    </div>
</template>
<script>
import Draggable from 'vuedraggable'
export default {
    name: 'BaseGrid',
    components: {
        Draggable
    },
    props: {
        data: {
            type: Object
        }
    },
    methods: {
        handleAddColumn() {
            this.data.columns.push({
                span: '',
                list: []
            })
        },
        handleOptionsRemove(index) {
            this.data.columns.splice(index, 1)
        }
    }
}
</script>
